<template>
  <van-popup
    :style="{ height: '20%' }"
    position="bottom"
    round
    v-model="show"
  >
    <van-field
      autosize
      clearable
      maxlength="50"
      placeholder="请输入留言"
      rows="3"
      show-word-limit
      type="textarea"
      v-model="value"
    />

    <div
      @click="publishComment"
      class="post-btn"
    >发布</div>
  </van-popup>
</template>

<script>
import { addComment } from "../../network/article";

export default {
  name: "PublishComment",
  components: {},
  computed: {},
  props: ["type"],
  data() {
    return {
      show: false,
      value: "",
      id:""
    };
  },
  created() {},
  mounted() {},
  methods: {
    isShow(id) {
      this.show = true;
      this.id = id
    },
    //发表评论
    async publishComment() {
      if (!this.value.trim()) {
        return this.$toast.fail("评论不可以为空");
      }
      if (this.type === "article") {
        const result = await addComment({
          target: this.$route.params.articleId, // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
          content: this.value // 评论内容
          // art_id // 文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
        });
        console.log(result);
        if (result.message === "OK") {
          this.$bus.$emit("addComment", result.data.new_obj);
          this.show = false;
          this.$toast.success("评论成功");
          this.value = "";
        } else {
          this.$toast.fail("评论失败");
        }
      } else {
        const result = await addComment({
          target: this.id, // 评论的目标id（评论文章即为文章id，对评论进行回复则为评论id）
          content: this.value, // 评论内容
          art_id:this.$route.params.articleId // 文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数。
        });
        console.log(result);
        if (result.message === "OK") {
          result.data.new_obj.is_liking = false
          this.$bus.$emit("addReply",result.data.new_obj)
          this.show = false;
          this.$toast.success("评论成功");
          this.value = "";
        } else {
          this.$toast.fail("评论失败");
        }
      }
    }
  }
};
</script>

<style scoped lang="stylus" >
.van-popup
  border-radius 10px 10px 0 0
  padding 10px
  box-sizing border-box

.van-field
  background-color #f5f7f9

.van-popup
  display flex

  .post-btn
    min-width 50px
    display flex
    align-items center
    justify-content center
</style>